<template>
  <div class="mine">
    <div class="my_etc_card">
        <div class="etc_card_top">
            <ul>
               <li>
                 <a href="javascript:void(0)">户名：</a>
                 <a href="javascript:void(0)">张玉峰</a>
               </li>
               <li>
                 <a href="javascript:void(0)">车牌号：</a>
                 <a href="javascript:void(0)">鲁AN357H</a>
               </li>
               <li>
                 <a href="javascript:void(0)">卡号：</a>
                 <a href="javascript:void(0)">3702 1303 2202 0034 2312</a>
               </li>
             </ul>
        </div>
        <div class="etc_card_btm">
           <p>备注：<span>可添加卡片备注</span></p>
           <p><img src="../assets/img/pen@2x.png"></p>
        </div>
    </div>
    <div class="my_etc_card">
        <div class="etc_card_top">
            <ul>
               <li>
                 <a href="javascript:void(0)">户名：</a>
                 <a href="javascript:void(0)">张玉峰</a>
               </li>
               <li>
                 <a href="javascript:void(0)">车牌号：</a>
                 <a href="javascript:void(0)">鲁AN357H</a>
               </li>
               <li>
                 <a href="javascript:void(0)">卡号：</a>
                 <a href="javascript:void(0)">3702 1303 2202 0034 2312</a>
               </li>
             </ul>
        </div>
        <div class="etc_card_btm">
           <p>备注：<span>可添加卡片备注</span></p>
           <p><img src="../assets/img/pen@2x.png"></p>
        </div>
    </div>
    <div class="add_card">
    <router-link to = 'etc_card'><p>添加ETC卡</p></router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mine',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  },
  beforeRouteEnter (to, from, next){
    next(vm => {
      vm.$parent.active = vm.$route.path.replace('/','')
      vm.$parent.title = '用户中心'
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '../assets/less/style.less';
.mine {
  header {
     .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
    }
    .my_etc_card {
      /* display: flex; */
      /* flex-direction: column; */
      /* justify-content: center; */
      .margin-top(38);
      .etc_card_top {
        .px2rem(height,204);
        .px2rem(width,614);
        /* .border(1,solid,#000); */
        margin:0 auto;
        background: url('../assets/img/bluebox@2x.png');
        background-size: cover;
        ul {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100%;
          .padding-left(32);
          li {
            .line-height(50);
            /* display: flex; */
            a {
              .font(28,#fff);
              /* height: 100%; */
              /* display: block; */
            }
          }
        }
      }
      .etc_card_btm {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .px2rem(height,102);
        .px2rem(width,614);
        .border-top(1,dashed,#979797);
        .border-radius(15);
        margin: auto;
        background: url('../assets/img/whitebox@2x.png');
        background-size: cover;
        p:nth-child(1){
          .padding-left(36);
        }
        p:nth-child(2){
          img {
            .px2rem(height,48);
            .px2rem(width,48);
          }
          .padding-right(16);
        }
      }
    }
    .add_card{
      .px2rem(width,614);
      margin: auto;
      .margin-top(190);
        p {
          .line-height(84);
          .font(26,#49b97e);
          .border(1,dashed,#098545);
          font-weight: bold;
          text-align: center;
        }
      }
  nav {
    .px2rem(height,98);
    /* .border(1,solid,#000); */
    background: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    ul {
      height: 100%;
      display: flex;
      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:nth-child(1){
          a:nth-child(1){
            img {
              .px2rem(height,39);
              .px2rem(width,39);
            }
          }
        }
        &:nth-child(2){
          a:nth-child(1){
            img {
              .px2rem(height,36);
              .px2rem(width,36);
            }
          }
        }
        &:nth-child(3){
          a:nth-child(1){
            img {
              .px2rem(height,38);
              .px2rem(width,34);
            }
          }
        }
        a {
          display: block;
        }
      }
    }
  }
}


</style>
